<template>
  <div class="demo-container">
    <van-button id="target3" type="primary">更多操作3</van-button>
    <van-button id="target4" type="primary">更多操作4</van-button>
    <van-button id="target5" type="primary">更多操作5</van-button>
    <van-button id="target6" type="primary">更多操作6</van-button>
    <van-button id="target7" type="primary" block>更多操作7</van-button>
    <van-button id="target8" type="primary" block>更多操作8</van-button>
    <van-button id="target9" type="primary">更多操作9</van-button>
    <van-button id="target10" type="primary">更多操作10</van-button>
    <van-button id="target11" type="primary">更多操作11</van-button>
    <van-button id="target12" type="primary">更多操作12</van-button>
    <van-button id="target13" type="primary">更多操作13</van-button>
    <van-button id="target14" type="primary">更多操作14</van-button>
    <van-button id="target15" type="primary">更多操作15</van-button>
    <van-button id="target16" type="primary" block>更多操作16</van-button>
    <van-button id="target17" type="primary" block>更多操作17</van-button>
    <van-button id="target18" type="primary">更多操作18</van-button>
    <van-button id="target19" type="primary">更多操作19</van-button>
    <van-button id="target20" type="primary">更多操作20</van-button>
    <van-button id="target21" type="primary">更多操作21</van-button>
    <van-button id="target22" type="primary">更多操作22</van-button>
    <van-button id="target23" type="primary">更多操作23</van-button>
    <van-button id="target24" type="primary">更多操作24</van-button>
    <van-button id="target25" type="primary">更多操作25</van-button>
    <van-button id="target26" type="primary">更多操作26</van-button>
    <van-button id="target27" type="primary">更多操作27</van-button>
    <van-button id="target28" type="primary">更多操作28</van-button>
    <van-button id="target29" type="primary">更多操作29</van-button>
    <van-button id="target30" type="primary">更多操作30</van-button>
    <van-button id="target31" type="primary">更多操作31</van-button>
    <van-button id="target32" type="primary">更多操作32</van-button>
    <van-button id="target33" type="primary">更多操作33</van-button>
    <van-button id="target34" type="primary">更多操作34</van-button>
    <van-button id="target35" type="primary">更多操作35</van-button>
    <van-button id="target36" type="primary">更多操作36</van-button>
    <van-button id="target37" type="primary">更多操作37</van-button>
    <van-button id="target38" type="primary">更多操作38</van-button>
    <van-button id="target39" type="primary">更多操作39</van-button>
    <van-button id="target40" type="primary">更多操作40</van-button>
    <van-button id="target41" type="primary">更多操作41</van-button>
    <van-button id="target42" type="primary">更多操作42</van-button>
    <van-button id="target43" type="primary">更多操作43</van-button>
    <van-button id="target44" type="primary">更多操作44</van-button>
    <van-button id="target45" type="primary">更多操作45</van-button>
    <van-button id="target46" type="primary">更多操作46</van-button>
    <van-button id="target47" type="primary">更多操作47</van-button>
    <van-button id="target48" type="primary">更多操作48</van-button>
    <van-button id="target49" type="primary">更多操作49</van-button>
    <van-button id="target50" type="primary">更多操作50</van-button>
    <van-button id="target51" type="primary">更多操作51</van-button>
    <van-button id="target52" type="primary">更多操作52</van-button>
    <van-button id="target53" type="primary">更多操作53</van-button>
    <van-button id="target54" type="primary">更多操作54</van-button>
    <van-button id="target55" type="primary">更多操作55</van-button>
    <van-button id="target56" type="primary">更多操作56</van-button>
    <van-button id="target57" type="primary">更多操作57</van-button>
    <van-button id="target58" type="primary">更多操作58</van-button>
    <van-button id="target59" type="primary">更多操作59</van-button>
    <van-button id="target60" type="primary">更多操作60</van-button>
    <van-button id="target61" type="primary">更多操作61</van-button>
    <van-button id="target62" type="primary">更多操作62</van-button>
    <van-button id="target63" type="primary">更多操作63</van-button>
    <van-button id="target64" type="primary">更多操作64</van-button>
    <van-button id="target65" type="primary">更多操作65</van-button>
    <van-button id="target66" type="primary">更多操作66</van-button>
    <van-button id="target67" type="primary">更多操作67</van-button>
    <van-button id="target68" type="primary">更多操作68</van-button>
    <van-button id="target69" type="primary">更多操作69</van-button>
    <van-button id="target70" type="primary">更多操作70</van-button>
    <van-button id="target71" type="primary">更多操作71</van-button>
    <van-button id="target72" type="primary">更多操作72</van-button>
    <van-button id="target73" type="primary">更多操作73</van-button>
    <van-button id="target74" type="primary">更多操作74</van-button>
    <van-button id="target75" type="primary">更多操作75</van-button>
    <van-button id="target76" type="primary">更多操作76</van-button>
    <van-button id="target77" type="primary" block>更多操作77</van-button>


    <Tour v-model:modelValue="showTour" :steps="tourSteps" @finish="onFinish" @skip="onSkip" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Tour from '../components/Tour/index.vue';

const showTour = ref(false);
const tourSteps = ref([
  {
    target: '#target3',
    title: '更多操作3',
    description: '点击这里可以查看更多选项3'
  },
  {
    target: '#target4',
    title: '更多操作4',
    description: '点击这里可以查看更多选项4'
  },
  {
    target: '#target5',
    title: '更多操作5',
    description: '点击这里可以查看更多选项5'
  },
  {
    target: '#target6',
    title: '更多操作6',
    description: '点击这里可以查看更多选项6'
  },
  {
    target: '#target7',
    title: '更多操作7',
    description: '点击这里可以查看更多选项7'
  },
  {
    target: '#target8',
    title: '更多操作8',
    description: '点击这里可以查看更多选项8'
  },
  {
    target: '#target9',
    title: '更多操作9',
    description: '点击这里可以查看更多选项9'
  },
  {
    target: '#target10',
    title: '更多操作10',
    description: '点击这里可以查看更多选项10'
  },
  {
    target: '#target11',
    title: '更多操作11',
    description: '点击这里可以查看更多选项11'
  },
  {
    target: '#target12',
    title: '更多操作12',
    description: '点击这里可以查看更多选项12'
  },
  {
    target: '#target13',
    title: '更多操作13',
    description: '点击这里可以查看更多选项13'
  },
  {
    target: '#target14',
    title: '更多操作14',
    description: '点击这里可以查看更多选项14'
  },
  {
    target: '#target15',
    title: '更多操作15',
    description: '点击这里可以查看更多选项15'
  },
  {
    target: '#target16',
    title: '更多操作16',
    description: '点击这里可以查看更多选项16'
  },
  {
    target: '#target17',
    title: '更多操作17',
    description: '点击这里可以查看更多选项17'
  },
  {
    target: '#target18',
    title: '更多操作18',
    description: '点击这里可以查看更多选项18'
  },
  {
    target: '#target19',
    title: '更多操作19',
    description: '点击这里可以查看更多选项19'
  },
  {
    target: '#target20',
    title: '更多操作20',
    description: '点击这里可以查看更多选项20'
  },
  {
    target: '#target21',
    title: '更多操作21',
    description: '点击这里可以查看更多选项21'
  },
  {
    target: '#target22',
    title: '更多操作22',
    description: '点击这里可以查看更多选项22'
  },
  {
    target: '#target23',
    title: '更多操作23',
    description: '点击这里可以查看更多选项23'
  },
  {
    target: '#target24',
    title: '更多操作24',
    description: '点击这里可以查看更多选项24'
  },
  {
    target: '#target25',
    title: '更多操作25',
    description: '点击这里可以查看更多选项25'
  },
  {
    target: '#target26',
    title: '更多操作26',
    description: '点击这里可以查看更多选项26'
  },
  {
    target: '#target27',
    title: '更多操作27',
    description: '点击这里可以查看更多选项27'
  },
  {
    target: '#target28',
    title: '更多操作28',
    description: '点击这里可以查看更多选项28'
  },
  {
    target: '#target29',
    title: '更多操作29',
    description: '点击这里可以查看更多选项29'
  },
  {
    target: '#target30',
    title: '更多操作30',
    description: '点击这里可以查看更多选项30'
  },
  {
    target: '#target31',
    title: '更多操作31',
    description: '点击这里可以查看更多选项31'
  },
  {
    target: '#target32',
    title: '更多操作32',
    description: '点击这里可以查看更多选项32'
  },
  {
    target: '#target33',
    title: '更多操作33',
    description: '点击这里可以查看更多选项33'
  },
  {
    target: '#target34',
    title: '更多操作34',
    description: '点击这里可以查看更多选项34'
  },
  {
    target: '#target35',
    title: '更多操作35',
    description: '点击这里可以查看更多选项35'
  },
  {
    target: '#target36',
    title: '更多操作36',
    description: '点击这里可以查看更多选项36'
  },
  {
    target: '#target37',
    title: '更多操作37',
    description: '点击这里可以查看更多选项37'
  },
  {
    target: '#target38',
    title: '更多操作38',
    description: '点击这里可以查看更多选项38'
  },
  {
    target: '#target39',
    title: '更多操作39',
    description: '点击这里可以查看更多选项39'
  },
  {
    target: '#target40',
    title: '更多操作40',
    description: '点击这里可以查看更多选项40'
  },
  {
    target: '#target41',
    title: '更多操作41',
    description: '点击这里可以查看更多选项41'
  },
  {
    target: '#target42',
    title: '更多操作42',
    description: '点击这里可以查看更多选项42'
  },
  {
    target: '#target43',
    title: '更多操作43',
    description: '点击这里可以查看更多选项43'
  },
  {
    target: '#target44',
    title: '更多操作44',
    description: '点击这里可以查看更多选项44'
  },
  {
    target: '#target45',
    title: '更多操作45',
    description: '点击这里可以查看更多选项45'
  },
  {
    target: '#target46',
    title: '更多操作46',
    description: '点击这里可以查看更多选项46'
  },
  {
    target: '#target47',
    title: '更多操作47',
    description: '点击这里可以查看更多选项47'
  },
  {
    target: '#target48',
    title: '更多操作48',
    description: '点击这里可以查看更多选项48'
  },
  {
    target: '#target49',
    title: '更多操作49',
    description: '点击这里可以查看更多选项49'
  },
  {
    target: '#target50',
    title: '更多操作50',
    description: '点击这里可以查看更多选项50'
  },
  {
    target: '#target51',
    title: '更多操作51',
    description: '点击这里可以查看更多选项51'
  },
  {
    target: '#target52',
    title: '更多操作52',
    description: '点击这里可以查看更多选项52'
  },
  {
    target: '#target53',
    title: '更多操作53',
    description: '点击这里可以查看更多选项53'
  },

]);

// 检查是否是首次访问
const checkFirstVisit = () => {
  // 使用localStorage记录用户是否已完成过引导
  const hasCompletedTour = localStorage.getItem('hasCompletedTour');
  // 如果没有记录，且不是开发环境，则自动显示引导
  return !hasCompletedTour
};

// 自动触发引导
onMounted(() => {
  // 延迟500ms确保页面元素加载完成
  const timer = setTimeout(() => {
    if (checkFirstVisit()) {
      console.log('开始导航')
      showTour.value = true;
    }
    clearTimeout(timer);
  }, 500);
});

// 完成引导后记录状态
const onFinish = () => {
  showTour.value = false;
  localStorage.setItem('hasCompletedTour', 'true');
};

// 跳过引导后也记录状态
const onSkip = () => {
  showTour.value = false;
  localStorage.setItem('hasCompletedTour', 'true');
};
</script>
<style scoped>
/* 开发环境重置按钮样式 */
.reset-tour-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  padding: 8px 16px;
  background: #f56c6c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

<style lang="scss">
  #target3{
    position:fixed;
    top:0px;
    right:0px;
  }
  #target4 {
    position: fixed;
    top: 0px;
    left: 0px;
  }
  #target5 {
    position: fixed;
    bottom: 0px;
    right: 0px;
  }
  #target6 {
    position: fixed;
    bottom: 0px;
    left: 0px;
  }
</style>